<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <style>
        .container { max-width: 800px; margin: 50px auto; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 12px; border: 1px solid #ddd; text-align: left; }
        th { background-color: #f5f5f5; }
        #logoutBtn { padding: 8px 16px; background: #dc3545; color: white; border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div class="container">
        <h2>所有注册用户</h2>
        <button id="logoutBtn" onclick="logout()">退出登录</button>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                </tr>
            </thead>
            <tbody id="userTableBody">
                <!-- 数据将通过JS动态加载 -->
            </tbody>
        </table>
    </div>

    <script>
        window.onload = function() {
            fetch('/api/getall')
            .then(res => res.json())
            .then(data => {
                if (data.code === 200) {
                    const tbody = document.getElementById('userTableBody');
                    data.users.forEach(user => {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `<td>${user.id}</td><td>${user.name}</td>`;
                        tbody.appendChild(tr);
                    });
                } else if (data.code === 403) {
                    window.location.href = '/';
                }
            });
        }

        function logout() {
            window.location.href = '/api/logout';
        }
    </script>
</body>
</html>